<template>
    <div class="act-list">
        <div class="head">
            <ul>
                <li>
                    <router-link to="/index">首页</router-link>
                </li>
                <li>
                    <span class="return"></span>
                    <router-link to="/activelist">活动列表</router-link>
                </li>
            </ul>
            <h2>评审活动列表</h2>
        </div>
        <div class="el-box">
            <el-row v-for="act in activeData" v-if="activeData.length>0">
                <el-card :body-style="{ padding: '0px' }">
                    <div style="padding: 14px">
                        <div class="title">
                            <h4>{{ act.title }}</h4>
                            <span :class="act.status===1?'underway':act.status===2?'end':'nostart'">{{act.status===1?'进行中':act.status===2?'已结束':'未开始'}}</span>
                        </div>
                        
                        <div class="bottom">
                            <time class="time">{{ act.wssbkssj}}-{{act.wssbjssj}}</time>
                            <router-link :to="'/activity/details?id='+act.id">详情>></router-link>
                        </div>
                    </div>
                </el-card>
            </el-row>
			<div v-show="activeData.length<=0">
				<el-empty ></el-empty>
			</div>
			
        </div>
        <div class="t_paging">
            <el-pagination
                    background
                    layout="prev, pager, next"
					:current-page="currrentPage"
					@current-change="queryActivityList()"
					hide-on-single-page
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "ActivityList",
		created() {
			this.queryActivityList();
		},
		methods:{
			
			//活动列表查询
			queryActivityList(){
				let that=this
				that.$http.get("/events/eventstopslt",{
					 params:{
						currrentPage:that.currrentPage,
						pageSize:that.pageSize
					 }
				}).then(res=>{
					that.activeData=res.data.list
					that.currrentPage=res.data.currenPage
					that.total=res.data.total
				})
				
			}
		},
        data() {
            return {
                activeData: [],
				currrentPage:1,
				pageSize:10,
				total:0
            }
        }

    }
</script>

<style scoped>
    a {
        text-decoration: none;
        color: #3A6DE4;
    }

    ul {
        float: left;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        width: 100%;
    }

    li {
        color: #acacac;
        display: inline-block;
        float: left;
        padding-right: 10px;
    }
    .el-row {
        margin-top: 20px;
    }

    .time {
        font-size: 13px;
        color: #b3b3b3;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    /*    */
    .act-list {
        width: 1200px;
        margin: 0 auto;
        height: 800px;
        overflow: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    .head {
        text-align: center;
        color: #989898;
    }

    .head > a {
        float: left;
        padding-left: 10px;
    }

    .return {
        font-size: 16px;
    }

    .return:before {
        content: ">  ";
        font-size: 16px;
        color: #3A6DE4;
    }

    .el-box {
        margin: 0 auto;
        width: 100%;
        padding: 10px;
        border: #d3d3d3;
        border-shadow: 1px 1px;
    }

    .title {
        display: flex;
    }

    .title > h4 {
        color: #3A6DE4;
    }

    .title span {
        text-align: center;
        display: inline-block;
        margin: 10px 0 0 20px;
        width: 60px;
        height: 18px;
        border-radius: 9px;
        color: #ffffff;
    }

    /*
    根据状态转换class 改变背景颜色
    end:已结束背景
    nostart:未开始
    underway：进行中
    */
    .end {
        background-color: #acacac;
    }

    .nostart {
        background-color: #253FDB;
    }

    .underway {
        background-color: #19cc00;
    }

    .cont {
        width: 1000px;
        color: #686868;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 分页 */

    .t_paging {
        float: left;
        text-align: center;
        margin: 20px 0 0 35%;
    }

    .t_paging ul {
        list-style: none;
        display: flex;
        height: 50px;
    }

    .t_paging li {
        line-height: 50px;
        text-align: center;
        border-radius: 3.5px;
    }

    .t_paging li:not(.t_upAndDown) {
        width: 50px;
        height: 50px;
        border: 1px solid #91ADF0;
        background-color: #fff;
    }

    .t_paging li:not(:last-child) {
        margin-right: 10px;
    }

    .t_paging li a {
        color: black;
        display: inline-block;
        text-decoration: none;
        font-size: 20px;
        width: 100%;
        height: 100%;
        border-radius: 3.5px;
    }
</style>
